/// 圆形头像放大特殊效果
/// @param {length} $size - 头像大小
/// @param {length} $boderWidth - 边框宽度
/// @param {color} $bg - 背景颜色
@mixin avatar($size: 280px, $boderWidth: 5px, $bg: #ecd078) {
  --scale: 1; // 定义一个变量，初始值为1

  $bdColor: invert($bg); // 定义一个变量，值为背景颜色的反色
  $bgOption: content-box no-repeat center/calc(100% / var(--scale)) 100%; // 定义一个变量，值为背景选项
  $shrink: calc(
    ($size / var(--scale) - $size) / 2 - $boderWidth
  ); // 定义一个变量，值为缩小的值

  width: $size; // 设置宽度为变量$size
  height: $size; // 设置高度为变量$size
  cursor: pointer; // 设置鼠标样式为指针
  transition: all 0.5s; // 设置所有属性在0.5秒内过渡
  padding-top: calc($size / 2); // 设置上内边距为变量$size的一半
  transform: scale(var(--scale)); // 设置缩放比例为变量--scale
  outline: $boderWidth solid $bdColor; // 设置外边框为变量$boderWidth的宽度，颜色为变量$bdColor
  outline-offset: $shrink; // 设置外边框偏移量为变量$shrink
  // border-width: calc(
  //   $boderWidth * var(--scale)
  // ); // 设置边框宽度为变量$boderWidth乘以变量--scale
  border-radius: 0 0 999px 999px; // 设置边框圆角为0 0 999px 999px
  background: radial-gradient(
      // 设置背景为径向渐变
      circle closest-side,
      $bg calc(99% - $boderWidth),
      $bdColor calc(100% - $boderWidth),
      $bdColor 99%,
      transparent 100%
    )
    $bgOption; // 使用变量$bgOption
  mask: linear-gradient(#000 0 0) no-repeat center // 设置遮罩为线性渐变
    calc(0px - $shrink + $boderWidth) / // 使用变量$shrink
    calc(100% / var(--scale) - 2.5 * $boderWidth) 50%,
    // 使用变量--scale
    radial-gradient(
        circle closest-side,
        #000 99%,
        transparent 100%
      ) $bgOption; // 使用变量$bgOption
  &:hover {
    // 当鼠标悬停时
    --scale: 1.35; // 将变量--scale的值设置为1.35
  }
}

/// 菱形头像放大特殊效果
/// @param {color} $bg - 背景颜色
@mixin rhombus($bg: #28a6b5) {
  --s: min(50vw, 260px);
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  box-sizing: border-box;
  padding: calc(var(--s) / 4) calc(var(--s) / 8) 0;
  background: conic-gradient(from 135deg at 50% 15%, #e0dee1, $bg 25%, #0000 0);
  clip-path: polygon(-50% 0, 150% 0, 50% 100%);
  cursor: pointer;
  transition: padding 0.5s;
  &:hover {
    padding: 0;
  }
}
